---
import Config from '@/config.js'
import HomeLayout from '@/layouts/HomeLayout.astro'
import Ads from '@/components/Ads.astro'
import Supports from '@/components/Supports.astro'
import Subscribe from '@/components/Subscribe.astro'
import Prism from '@astrojs/prism/Prism.astro'
import { getBaseUrl, useTranslations } from '@/i18n/utils'

const baseurl = getBaseUrl(Astro.currentLocale)
const t = useTranslations(Astro.currentLocale)
---

<HomeLayout>
  <main class="bd-masthead" id="content" role="main">
    <div class="container">
      <div class="row align-items-center">
        <div class="col-4 mx-auto col-md-3 order-md-2">
          <img class="img-fluid mb-3 mb-md-0" src={`${Config.baseurl}/favicon.png`}>
        </div>
        <div class="col-md-6 order-md-1 text-center text-md-start pe-md-5">
          <h1 class="mb-3 bd-text-purple-bright">
            {Config.title}
          </h1>
          <p class="lead">
            {t('site.description')}
          </p>
          <div class="row mx-n2">
            <div class="col-md px-2">
              <a href={`${baseurl}/docs/getting-started/introduction/`}
                class="btn btn-lg btn-bd-primary w-100 mb-3">
                {t('home.getting_started')}
              </a>
            </div>
            <div class="col-md px-2">
              <a href={`${baseurl}/docs/getting-started/download/`}
                class="btn btn-lg btn-outline-secondary w-100 mb-3">
                {t('home.download')}
              </a>
            </div>
          </div>
          <p class="text-muted">
            {t('home.current_version', { version: Config.currentVersion })}
          </p>
          <Ads />
        </div>
      </div>
    </div>
  </main>

  <div class="masthead-followup row m-0">
    <div class="col-12 col-md-4 p-4 bg-body border rounded-4 shadow-sm">
      <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
      <h3>
        <svg width="32" height="32" class="text-primary mb-2" viewBox="0 0 32 32" fill="currentColor">
          <path d="M28 4H4c-1.1 0-2 .9-2 2v20c0 1.1.9 2 2 2h24c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zM4 26V6h24v20H4z"/>
          <path d="M14 8h4v2h-4zM14 12h4v2h-4zM14 16h4v2h-4zM14 20h4v2h-4z"/>
        </svg>
        {t('home.installation')}
      </h3>
      <p>{t('home.installation_description')}</p>

      <Prism code={`npm install bootstrap-table
yarn add bootstrap-table`} lang="bash" />

      <hr class="half-rule">
      <a class="btn btn-outline-primary"
        href={`${baseurl}/docs/getting-started/download/`}>
        {t('home.read_installation_docs')}
      </a>
    </div>

    <div class="col-12 col-md-4 p-4 bg-body border rounded-4 shadow-sm">
      <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
      <h3>
        <svg width="32" height="32" class="text-primary mb-2" viewBox="0 0 32 32" fill="currentColor">
          <path d="M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm0 26C9.4 28 4 22.6 4 16S9.4 4 16 4s12 5.4 12 12-5.4 12-12 12z"/>
          <path d="M16 8v8l6 6"/>
        </svg>
        CDN
      </h3>
      <p set:html={t('home.cdn_description', {
        cdnjs: `<a href="https://cdn.jsdelivr.net/npm/bootstrap-table@${Config.currentVersion}/dist/">CDNJS</a>`
      })}></p>

      <Prism code={`<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-table@${Config.currentVersion}/dist/bootstrap-table.min.css">
<script src="https://cdn.jsdelivr.net/npm/bootstrap-table@${Config.currentVersion}/dist/bootstrap-table.min.js"></script>`} lang="html" />

      <hr class="half-rule">
      <a href={`${baseurl}/docs/api`} class="btn btn-outline-primary">
        {t('home.explore_docs')}
      </a>
    </div>

    <div class="col-12 col-md-4 p-4 bg-body border rounded-4 shadow-sm">
      <!-- Icon by Bytesize https://github.com/danklammer/bytesize-icons -->
      <h3>
        <svg width="32" height="32" class="text-primary mb-2" viewBox="0 0 32 32" fill="currentColor">
          <path d="M16 2L3 9v6c0 5.6 5.3 10.7 13 13 7.7-2.3 13-7.4 13-13V9l-13-7z"/>
          <path d="M16 6l-8 4.5v3.5c0 4.1 3.9 7.8 8 9.5 4.1-1.7 8-5.4 8-9.5v-3.5L16 6z"/>
        </svg>
        {t('home.examples')}
      </h3>
      <p>
        {t('home.examples_description')}
      </p>

      <hr class="half-rule">
      <a href="https://examples.bootstrap-table.com" class="btn btn-outline-primary">
        {t('home.browse_examples')}
      </a>
    </div>
  </div>

  <Supports />
  <Subscribe />
</HomeLayout>
